<style lang="scss" scoped>
.user_info {
  header {
    height: 1.4rem;
    .user_img {
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 100%;
    }
  }
  main {
    li {
      height: 0.48rem;
      line-height: 0.48rem;
      .tit1 {
        width: 0.9rem;
      }
    }
    .tit {
      width: 0.62rem;
    }
    .code {
      width: 1.3rem;
      height: 0.8rem;
      label {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10; /* 这个z-index之后说到*/
      }
    }
    .codes {
      width: 1.5rem;
      height: 0.9rem;
    }
  }
  footer {
    div {
      height: 0.45rem;
    }
  }
  input {
    background: #fff;
  }
  input.file {
    position: absolute;
    left: -9999px;
  }
}
</style>

<template>
  <div class="user_info bgfff full">
    <header class="box-center bgf5">
      <div class="img-bg user_img margin-b10 box-center" :style="{backgroundImage:`url(${info.wximpurl})`}">
        <!-- <i class="iconfont icon-yonghu font-28"></i> -->
      </div>
      <div>{{info.username}}</div>
    </header>
    <main>
      <ul class="padding-lr15 bgfff">
        <li class="border-b flex-col">
          <div class="tit1 c82">姓名</div>
          <div class="box1">
            <input v-model="info.username" :disabled="!revise" class="full" placeholder="请输入姓名" type="text" />
          </div>
        </li>
        <li class="border-b flex-col">
          <div class="tit1 c82">手机</div>
          <div class="box1"><input v-model="info.mobile" :disabled="!revise" class="full" placeholder="请输入手机号" type="text" /></div>
        </li>
        <li class="border-b flex-col">
          <div class="tit1 c82">所属经纪公司</div>
          <div class="box1"><input v-model="info.company_name" :disabled="!revise" class="full" :placeholder="revise ? '请填写所属经纪公司' : '' " type="text" /></div>
        </li>
        <li class="flex-col">
          <div class="tit1 c82">门店编码</div>
          <div class="box1"><input v-model="info.store_code" :disabled="!revise" class="full" :placeholder="revise ? '请填写门店编码' : ''" type="text" /></div>
        </li>
      </ul>
      <div class="interval"></div>
      <div class="padding-15 bgfff">
        <div class="border-b flex-col">
          <div class="c82 tit">身份证</div>
          <div class="box1 box-center text-c">
            <div class="img-bg bor-r code box-center position-r" :style="{backgroundImage:`url(${info.idCardYesFaceImg})`}">
              <input class="file" name="file" id="file" type="file" ref="file" accept="image/png,image/gif,image/jpeg" @change="upload($event,'file')" />
              <label for="file" class="cfff box-center" v-show="revise">点击上传</label>
            </div>
            <div class="padding-tb10">正面</div>
          </div>
          <div class="box-center text-c padding-r5">
            <div class="img-bg bor-r code box-center position-r" :style="{backgroundImage:`url(${info.idCardNoFaceImg})`}">
              <input class="file" name="img" id="img" type="file" ref="img" accept="image/png,image/gif,image/jpeg" @change="upload($event,'img')" />
              <label for="img" class="cfff box-center" v-show="revise">点击上传</label>
            </div>
            <div class="padding-tb10">背面</div>
          </div>
        </div>

        <!-- <div class="flex-col padding-t15">
                    <div class="c82 tit">职业认证</div>
                    <div class="box1">
                        <div class="img-bg bor-r codes"></div>
                    </div>
                </div> -->
      </div>
    </main>
    <footer class="padding-20 bgfff" v-show="!revise">
      <div class="box-center bgred cfff bor-r" @click="revise = true">编辑资料</div>
    </footer>
    <footer class="padding-20 bgfff flex-col" v-show="revise">
      <div class="box-center img-bg cfff bor-r box1 margin-r5" @click="revise=false">取消</div>
      <div class="box-center bgred cfff bor-r box1 margin-l5" @click="update">修改</div>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "user_info",
  data() {
    return {
      revise: false,
      info: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 用户信息
    getInfo() {
      let that = this;
      this.http.get("user/userInfo").then(res => {
        that.info = res.data;
      });
    },
    // 图片上传
    upload(e, i) {
      var that = this;
      var file = e.target.files[0];
      var imgSize = file.size / 1024;
      if (imgSize > 1024 * 20) {
        that.alert("请上传大小不要超过20M的图片");
        return;
      } else {
        // let file = new FormData();
        // file.append("file", this.$refs.picers.files[0]);

        if (this.$refs[i].files.length !== 0) {
          // var image = new FormData();
          // image.append("file", this.$refs[i].files[0]);

          var reader = new FileReader();
          reader.readAsDataURL(file); // 读出 base64
          reader.onloadend = function() {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
            var dataURL = reader.result;
            // 下面逻辑处理
            // that.info.idCard_yes_faceImg = dataURL;

            that.http
              .post("user/uploadimageBase64File", {
                base64: dataURL
              })
              .then(res => {
                if (i === "img") {
                  that.info.idCardNoFaceImg = res.address;
                } else {
                  that.info.idCardYesFaceImg = res.address;
                }
              });
          };
        }
      }
    },
    // 修改个人信息
    update() {
      let that = this,
        info = this.info;
        delete info['create_Time'];// 后台时间删除，不然报错
      this.http.post("user/update", info).then(res => {
        if (res.code === 0) {
          that.revise = false;
          that.updateUserInfo();
        }
      });
    }
  }
};
</script>


